<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--
v-for

根据数据生成列表结构

1. v-for指令的作用是:根据数据生成列表结构

2. 数组经常和v-for结合使用

3. 语法是( item,index ) in 数据

4. item 和 index 可以结合其他指令一起使用

5. 数组长度的更新会同步到页面上,是响应式的


-->
<div id="app">
    <input type="button" value="添加数据" @click="add">
    <input type="button" value="移除数据" @click="remove">
    <ul>
        <li v-for="(it,index) in arr">{{index}}=>{{it}}</li>
    </ul>
    <h2 v-for="item in vegetables">
        {{item.name}}
    </h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            arr:["北京","上海","广州","深圳"],
            vegetables:[
                {name:"西兰花炒蛋"},
                {name:"蛋炒西蓝花"}
            ]
        },
        methods:{
            add:function(){
                this.vegetables.push({ name:"花菜炒蛋" });
            },
            remove:function(){
                this.vegetables.shift();
            }
        }
    });
</script>
</html>